<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>移动端适配测试 - 突袭简历</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/mobile.css">
    <link rel="icon" href="images/favicon.ico" type="image/x-icon">
    <style>
        .test-section {
            margin: 20px 0;
            padding: 20px;
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius-md);
        }
        .test-title {
            color: var(--primary-color);
            margin-bottom: 15px;
            font-size: 1.2rem;
            font-weight: 600;
        }
        .demo-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin: 15px 0;
        }
        .demo-card {
            padding: 15px;
            background: var(--background-secondary);
            border-radius: var(--border-radius-sm);
            text-align: center;
        }
    </style>
</head>
<body>
    <header class="header">
        <div class="container">
            <div class="logo">
                <a href="index.html">
                    <span class="logo-text">突袭简历</span>
                </a>
            </div>
            <nav class="main-nav">
                <ul>
                    <li><a href="index.html">首页</a></li>
                    <li><a href="templates.html">简历模板</a></li>
                    <li><a href="resume-analysis.html">AI分析</a></li>
                    <li><a href="pricing.html">会员服务</a></li>
                    <li><a href="mobile-test.html" class="active">移动端测试</a></li>
                </ul>
            </nav>
            <div class="user-actions">
                <a href="login.html" class="btn btn-login">登录</a>
                <a href="register.html" class="btn btn-primary">注册</a>
            </div>
            <button class="mobile-menu-toggle">
                <span></span>
                <span></span>
                <span></span>
            </button>
        </div>
    </header>

    <main class="container" style="padding: 40px 0;">
        <h1 class="text-center">移动端适配测试页面</h1>
        <p class="text-center" style="color: var(--text-secondary); margin-bottom: 40px;">测试各种移动端适配功能和响应式设计</p>

        <!-- 响应式网格测试 -->
        <div class="test-section">
            <h2 class="test-title">📱 响应式网格布局</h2>
            <div class="demo-grid">
                <div class="demo-card">卡片 1</div>
                <div class="demo-card">卡片 2</div>
                <div class="demo-card">卡片 3</div>
                <div class="demo-card">卡片 4</div>
            </div>
        </div>

        <!-- 按钮测试 -->
        <div class="test-section">
            <h2 class="test-title">🔘 触摸友好按钮</h2>
            <div class="mobile-stack" style="display: flex; gap: 10px; flex-wrap: wrap;">
                <button class="btn btn-primary touch-button">主要按钮</button>
                <button class="btn btn-secondary touch-button">次要按钮</button>
                <button class="btn btn-outline touch-button">轮廓按钮</button>
            </div>
            <div style="margin-top: 15px;">
                <button class="btn btn-primary mobile-full-width touch-button">全宽按钮</button>
            </div>
        </div>

        <!-- 表单测试 -->
        <div class="test-section">
            <h2 class="test-title">📝 移动端表单</h2>
            <form class="mobile-form">
                <div class="form-group">
                    <label for="test-input">测试输入框</label>
                    <input type="text" id="test-input" class="form-control touch-input" placeholder="请输入内容">
                </div>
                <div class="form-row" style="display: flex; gap: 15px;">
                    <div class="form-group" style="flex: 1;">
                        <label for="test-select">选择框</label>
                        <select id="test-select" class="form-control touch-input">
                            <option>选项 1</option>
                            <option>选项 2</option>
                            <option>选项 3</option>
                        </select>
                    </div>
                    <div class="form-group" style="flex: 1;">
                        <label for="test-date">日期</label>
                        <input type="date" id="test-date" class="form-control touch-input">
                    </div>
                </div>
                <div class="form-actions" style="display: flex; gap: 10px;">
                    <button type="submit" class="btn btn-primary touch-button">提交</button>
                    <button type="reset" class="btn btn-secondary touch-button">重置</button>
                </div>
            </form>
        </div>

        <!-- 卡片测试 -->
        <div class="test-section">
            <h2 class="test-title">🃏 移动端卡片</h2>
            <div class="mobile-card">
                <div class="mobile-card-header">
                    <h3 style="margin: 0;">卡片标题</h3>
                </div>
                <div class="mobile-card-body">
                    <p>这是卡片的主要内容区域。在移动端会有适当的内边距和间距调整。</p>
                </div>
                <div class="mobile-card-footer">
                    <button class="btn btn-primary btn-small">操作</button>
                </div>
            </div>
        </div>

        <!-- 表格测试 -->
        <div class="test-section">
            <h2 class="test-title">📊 移动端表格</h2>
            <div class="mobile-card-table">
                <table style="width: 100%; border-collapse: collapse;">
                    <thead>
                        <tr>
                            <th>姓名</th>
                            <th>职位</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td data-label="姓名">张三</td>
                            <td data-label="职位">前端工程师</td>
                            <td data-label="状态">在职</td>
                            <td data-label="操作">
                                <button class="btn btn-small btn-primary">编辑</button>
                            </td>
                        </tr>
                        <tr>
                            <td data-label="姓名">李四</td>
                            <td data-label="职位">后端工程师</td>
                            <td data-label="状态">离职</td>
                            <td data-label="操作">
                                <button class="btn btn-small btn-secondary">查看</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- 工具类测试 -->
        <div class="test-section">
            <h2 class="test-title">🛠️ 移动端工具类</h2>
            <div class="mobile-center mobile-mb-3">
                <span class="mobile-text-lg">居中大文本</span>
            </div>
            <div class="mobile-flex mobile-justify-between mobile-items-center mobile-mb-2">
                <span class="mobile-text-sm">左侧小文本</span>
                <span class="mobile-text-base">右侧普通文本</span>
            </div>
            <div class="mobile-grid" style="grid-template-columns: 1fr 1fr; gap: 10px;">
                <div class="mobile-p-2" style="background: var(--background-secondary); border-radius: 4px;">网格项 1</div>
                <div class="mobile-p-2" style="background: var(--background-secondary); border-radius: 4px;">网格项 2</div>
            </div>
        </div>

        <!-- 显示/隐藏测试 -->
        <div class="test-section">
            <h2 class="test-title">👁️ 响应式显示控制</h2>
            <div class="desktop-only" style="padding: 15px; background: #e3f2fd; border-radius: 4px; margin-bottom: 10px;">
                <strong>桌面端显示：</strong>这段内容只在桌面端显示
            </div>
            <div class="mobile-only" style="padding: 15px; background: #f3e5f5; border-radius: 4px;">
                <strong>移动端显示：</strong>这段内容只在移动端显示
            </div>
        </div>

        <!-- 滚动测试 -->
        <div class="test-section">
            <h2 class="test-title">📜 移动端滚动</h2>
            <div class="mobile-scroll-x" style="border: 1px solid var(--border-color); border-radius: 4px; padding: 10px;">
                <div style="display: flex; gap: 10px; min-width: 600px;">
                    <div style="min-width: 120px; padding: 10px; background: var(--background-secondary); border-radius: 4px; text-align: center;">项目 1</div>
                    <div style="min-width: 120px; padding: 10px; background: var(--background-secondary); border-radius: 4px; text-align: center;">项目 2</div>
                    <div style="min-width: 120px; padding: 10px; background: var(--background-secondary); border-radius: 4px; text-align: center;">项目 3</div>
                    <div style="min-width: 120px; padding: 10px; background: var(--background-secondary); border-radius: 4px; text-align: center;">项目 4</div>
                    <div style="min-width: 120px; padding: 10px; background: var(--background-secondary); border-radius: 4px; text-align: center;">项目 5</div>
                </div>
            </div>
            <p style="font-size: 0.875rem; color: var(--text-secondary); margin-top: 10px;">👆 可以左右滑动查看更多内容</p>
        </div>
    </main>

    <!-- 移动端底部导航示例 -->
    <nav class="mobile-nav-bottom mobile-only">
        <ul>
            <li>
                <a href="index.html">
                    <div class="nav-icon">🏠</div>
                    <span>首页</span>
                </a>
            </li>
            <li>
                <a href="templates.html">
                    <div class="nav-icon">📄</div>
                    <span>模板</span>
                </a>
            </li>
            <li>
                <a href="resume-analysis.html">
                    <div class="nav-icon">🔍</div>
                    <span>分析</span>
                </a>
            </li>
            <li>
                <a href="dashboard.html">
                    <div class="nav-icon">📊</div>
                    <span>工作台</span>
                </a>
            </li>
            <li>
                <a href="mobile-test.html" class="active">
                    <div class="nav-icon">📱</div>
                    <span>测试</span>
                </a>
            </li>
        </ul>
    </nav>

    <footer class="footer" style="margin-top: 60px;">
        <div class="container">
            <div class="footer-grid">
                <div class="footer-col">
                    <div class="footer-logo">
                        <span style="color: white; font-size: 1.5rem; font-weight: 600;">突袭简历</span>
                    </div>
                    <p>AI智能简历优化平台，让求职更简单</p>
                </div>
                <div class="footer-col">
                    <h4>产品</h4>
                    <ul>
                        <li><a href="templates.html">简历模板</a></li>
                        <li><a href="resume-analysis.html">AI分析</a></li>
                        <li><a href="pricing.html">会员服务</a></li>
                    </ul>
                </div>
                <div class="footer-col">
                    <h4>支持</h4>
                    <ul>
                        <li><a href="help-center.html">帮助中心</a></li>
                        <li><a href="#">联系我们</a></li>
                        <li><a href="#">意见反馈</a></li>
                    </ul>
                </div>
            </div>
            <div style="text-align: center; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.7);">
                <p>&copy; 2025 突袭简历. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <script src="js/main.js"></script>
</body>
</html>